@media (max-width: 820px ) and (min-width:451px) {

    .hero-text h1 {
    font-size: 20px;
    }

    .hero-text h2 {
    font-size: 14px;
    }

    .hero{
        margin-top: 70px;
        flex-direction: column;
        align-items: normal;
        justify-content: normal;
        min-height: auto;
    }

    .hero-text p {
    font-size: 14px;
    }


    .hero-image img {
        width: 150px;
        max-width: 60%;
    }

    .info-btns {
    font-size: 14px;
    padding: 8px 20px;
    }

    .project-btn {
    top: 570px;
    left: 66px;
    }

    .education-btn {
    top: 570px;
    left: 177px;
    }

    .hidden-tekst-possition{
    top: 600px;
    left: 66px;
    }

    .career-btn {
    top: 570px;
    left: 278px;
    }

    body{
        font-size: 14px;
    }

    h2{
        font-size: 16px;
    }

    .pdf-preview img {
        width: 40%; /* Adjust the width as needed */
    }

    .details{
        max-width: 70%;
    }


}